<section style="background-color: white">
  <ng-container *ngIf="tagData.data.prepaidPrice">
    <p class="prepaid-title">{{tagData.data.prepaidPrice.title}}</p>
    <p class="prepaid-price">{{tagData.data.prepaidPrice.price}}</p>
  </ng-container>

  <ng-container *ngIf="tagData.data.servicePrice">
    <p [ngClass]="{'price-title': tagData.data.prepaidPrice !== undefined}" class="prepaid-title">{{tagData.data.servicePrice.title}}</p>
    <p  [ngClass]="{'price-price': tagData.data.prepaidPrice !== undefined}" class="prepaid-price">{{tagData.data.servicePrice.price}}</p>
    <p *ngIf="tagData.data.servicePrice.describe" class="price-desc"><img class="desc-img" src="assets/icon/pay_icon_remind@3x.png"/>{{tagData.data.servicePrice.describe}}</p>
    <div class="sep-block"> </div>
  </ng-container>

  <ng-container *ngIf="tagData.data.serviceType">
      <div class="type-bg">
          <p class="type-title">{{tagData.data.serviceType.title}}</p>
          <p class="type-content">{{tagData.data.serviceType.content}}</p>
      </div>
      
    <div class="sep-block"> </div>
  </ng-container>
  <ng-container *ngIf="tagData.data.serviceContent">
      <div class="type-bg">
          <p class="type-title">{{tagData.data.serviceContent.title}}</p>
      </div>
      <hr class="sepline">
      <ion-grid class="grid-padding">
          <ion-row class="ion-align-items-start">
            <ion-col *ngFor="let itemInfo of tagData.data.serviceContent.items; let i=index" offset="0"  size="12">
              <ng-container *ngIf="itemInfo.content != null || itemInfo.value != undefined">
                  <p class="item-label"> {{itemInfo.title}}</p>
                  <p class="item-value">{{itemInfo.content}}</p>
                <div style="clear: both;"></div>
              </ng-container>
            </ion-col>
          </ion-row>
        </ion-grid>
  </ng-container>

</section>